<template>
    <el-card class="box-card" shadow="never">
        <!--通过slot分发，向组件内部指定位置传递内容-->
        <div slot="header">
            <span>😊 每日一句</span>
        </div>
        <div>
            <div class="has-text-left block">
                {{ tip.content }}
            </div>
            <!--block帮我们实现了块之间的间隙，md-5（内容外边距加5px）不生效-->
            <div class="has-text-right block">
                ---{{ tip.author }}
            </div>
        </div>
    </el-card>
</template>

<script>


    import { getTodayTip } from "@/api/tip";

    export default {
        name: 'Tip',
        data() {
            return {
                tip:{}
            }
        },
        //在页面开始加载的时候
        created(){
            //请求后台方法
            this.fetchTodayTip()
        },
        methods: {
            //定义异步方法
            async fetchTodayTip(){
                //接收到服务端返回来的value
                getTodayTip().then((value) => {
                    const { data } = value
                    this.tip = data;
                })
            }
        }
    }
</script>
